<template>
	<div >
		<vm-common-header
	      :pageTitle="pageTitle"
	      :goBack="goBack"></vm-common-header>

	    <ul class="point-top">
	    	<li>报警值<em>123.66</em></li>
	    	<li><strong>234.55</strong>实时值</li>
	    </ul>
	    <ul class="point-cont early-mb">
	    	<li><em>单位：伏特</em><span>报警类型：<i class="warning-color">上上限</i></span></li>
	    	<li>报警时间：2018-12-13 18:30:42</li>
	    	<li class="early-warning-li">
	    		报警内容:2018-12-13 点位1 13.6 低低限 报警内容1 通道号1 通讯设备：123
	    	</li>
	    	<li><em>数据模型：模拟量</em><span>信号类型：电压</span></li>
	    	<li><em>点位号：D-01</em><span>通道号：DD-A</span></li>
	    	<li>点位号名称：电厂设备15处201电压</li>
	    	<li><em>设备编码：B-01</em><span>通讯设备编码：DRTU01</span></li>
	    	<li>设备名称：FIDE-152B</li>
	    	<li><em>设备分类：分类A</em><span>所属项目：项目A</span></li>
	    	<li><em>量程上线：100</em><span>量程下限：0</span></li>
	    	<li><em>第1 次报警上限：80</em><span>第2次报警上限：90</span></li>
	    	<li ><em>第1次报警下限：20</em><span>第2次报警下限：10</span></li>
	    	<li>确认意见：
	    		<input class="early-input" type="text" placeholder="请填写确认意见" />
	    	</li>
	    </ul>
		<div class="early-nav">
			<nav @click="$router.go(-1);">返回</nav>
			<nav @click="$router.go(-1);">确定</nav>
		</div>
	</div>
</template>
<script>
	import vmCommonHeader from '@/components/vm-common-header' // header 组件
	export default {
		data(){
			return {
				pageTitle: this.$route.meta.pageTitle,
		        goBack: this.$route.meta.goBack,
			}
		},
		components: {
        	'vm-common-header': vmCommonHeader,	

		}
	}
</script>

<style lang="scss" scoped>
.earning-container {
	width: 100%;
	height: 100%;
	overflow: scroll;
}
.point-top{
	height: 99px;
	background: #ffffff;
	display: flex;
	padding: 0 55px;
	font-size: 30px;
	color: #666666;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eeeeee  /*no*/;
	box-shadow: 0 2px 5px 0 #eeeeee;
	>li>span{
		display: inline-block;
		padding: 10px 20px;
		color: #ffffff;
		background-color: #ffd14a;
		border-radius: 10px /*no*/;
		margin-left: 10px;
	}
	>li>em{
		background: #FF0000;
		display: inline-block;
		padding: 10px 20px;
		color: #ffffff;
		border-radius: 10px /*no*/;
		margin-left: 10px;
		
	}
	>li>strong{
		background: #eeeeee;
		display: inline-block;
		padding: 10px 20px;
		color: #000000;
		border-radius: 10px /*no*/;
		margin-right: 10px;
	}
}
.point-cont{
	margin-top: 20px;
	background-color: #ffffff;
	
	li{
		height: 81px;
		border-bottom: 1px solid #eeeeee /*no*/; 
		font-size: 28px;
		color: #666666;
		display: flex;
		margin: 0 20px;
		align-items: center;
		text-align: left;
		padding-left: 20px;
		>em{
			flex: 1;
			
		}
		>span{
			flex: 1;
		}
	}
	li:last-child{
		border-bottom: 0;
		height: 120px;
	}
	.early-warning-li{
		height: auto;
		background-color: #ff0000;
		color: #ffffff;
		margin: 0;
		padding: 10px 20px 10px 40px;
	}
}
.warning-color{
	color: red;
}
strong{
	font-weight: 100;
}
.early-input{
	display: inline-block;
	height: 80px;
	border: 0;
	background-color: #eeeeee;
	border-radius: 10px /*no*/;	
	flex: 1;
}
.early-nav{
	height: 120px;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	text-align: center;
	width: 100%;
	display: flex;
	padding: 0 120px;
	z-index: 5;
	justify-content: space-between;
	align-items: center;
	nav{
		padding: 20px 80px;
		border-radius: 10px /*no*/;
		font-size: 28px;
	}
	nav:first-child{
		background-color: #ffffff;
		border: 1px solid #f34b50  /*no*/;
		color: #F34B50;
	}
	nav:last-child{
		background-color: #f34b50;
		border: 1px solid #f34b50  /*no*/;
		color: #ffffff;
	}
}
.early-mb{
	margin-bottom: 130px;
}
</style>